<route lang="json5" type="page">
{
  style: { navigationBarTitleText: 'VIP会员', navigationStyle: 'custom' },
}
</route>
<template>
  <view class="vip-member">
    <view
      class="fixed-bg"
      :style="{
        background: `#FFEFE5`,
      }"
    >
      <image class="w-[100%] h-[400rpx]" :src="bgImg" mode="scaleToFill" />
    </view>
    <view class="vip-member__container">
      <image
        src="@/pages-sub/static/vip/vip-banner.png"
        mode="scaleToFill"
        class="w-full h-[190rpx]"
      />
      <view class="vip-member__content">
        <vip-card>
          <view class="text-[32rpx] text-[#80521A] mb-4 font-bold flex items-center gap-2">
            <text>{{ isLogined ? userInfo.nickname : '未登录' }}</text>
            <image
              class="w-[32rpx] h-[32rpx]"
              v-if="userInfo.isMember"
              src="@/assets/images/vip.png"
              mode="scaleToFill"
            />
          </view>
          <view class="text-[28rpx] text-[#80521A] opacity-50">{{ desc }}</view>
        </vip-card>

        <view class="vip-member__content__price">
          <view
            v-for="(item, index) in priceCardList"
            :key="item.id"
            :class="{ active: currentPriceIndex === index }"
            @click="currentPriceIndex = index"
          >
            <view class="label">{{ item.name }}</view>
            <view class="price mt-3 mb-[20rpx]"
              >¥ <text>{{ item.payPrice / 100 }}</text></view
            >
            <view class="underline-price">¥ {{ item.bonusPrice / 100 }}</view>
          </view>
        </view>

        <view
          class="vip-member__content__intro"
          v-for="item in introList"
          :key="item.icon"
          :style="{ backgroundImage: `url(${vipBg})` }"
        >
          <image :src="item.icon" mode="scaleToFill" />
          <view class="intro">
            <view class="intro__title">{{ item.title }}</view>
            <view class="intro__desc">{{ item.desc }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="vip-member__footer">
      <view class="btn" @click="handleConfirm">
        立即支付 ￥{{ priceCardList[currentPriceIndex].payPrice / 100 }}
      </view>
      <view @click="toExchange">已有卡，去兑换</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import bgImg from '@/assets/images/mine/mine-bg.png';
  import centerIcon from '@/pages-sub/static/vip/center.png';
  import robotIcon from '@/pages-sub/static/vip/robot.png';
  import systemIcon from '@/pages-sub/static/vip/system.png';
  import storeroomIcon from '@/pages-sub/static/vip/storeroom.png';
  import vipBg from '@/pages-sub/static/vip/vip-bg.png';
  import { ref } from 'vue';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import { dateFormat } from '@/utils';
  import { navigateTo } from '@/utils/router';
  import { getPriceCardList, createOrder } from '@/service/order';
  import { payRequest } from '@/utils/pay';
  import dayjs from 'dayjs';

  const userStore = useUserStore();
  const { userInfo, isLogined } = storeToRefs(userStore);
  type PriceCard = {
    name: string;
    payPrice: number;
    bonusPrice: number;
    id: number;
    beginTime: number;
    endTime: number;
  };

  const priceCardList = ref<Array<PriceCard>>([]);
  const currentPriceIndex = ref(0);

  const desc = computed(() => {
    if (!isLogined.value) {
      return '登录查看会员权益';
    }
    if (!userInfo.value.isMember) {
      return '暂未开通会员权益';
    }
    return '会员有效期至：' + dateFormat(userInfo.value.memberExpireDate, 'YYYY.MM.DD');
  });
  const introList = [
    {
      icon: storeroomIcon,
      title: '央国企信息智库',
      desc: '整合全国央企、国企及知名企业的权威数据，涵盖企业概况、行业地位、业务布局及官网信息，提供精准的企业情报与决策参考。',
    },
    {
      icon: centerIcon,
      title: '实时招聘中心',
      desc: '一键直达企业官方网申通道，支持复制链接快速投递，较传统方式效率提升300%，大幅优化求职流程。',
    },
    {
      icon: systemIcon,
      title: '智能求职系统',
      desc: '一键直达企业官方网申通道，支持复制链接快速投递，较传统方式效率提升300%，大幅优化求职流程。',
    },
    {
      icon: robotIcon,
      title: 'AI精准推荐',
      desc: '一站式求职服务，包括简历投递、面试咨询、 offer 追踪等功能，为求职者一站式搞定求职流程。',
    },
  ];

  const toExchange = () => {
    navigateTo('/pages-sub/activationCode/index');
  };
  const handleConfirm = () => {
    uni.showModal({
      title: '提示',
      content: '确认开通会员吗？',
      success: ({ confirm }) => {
        if (!confirm) {
          return;
        }
        let { payPrice: goodsPrice, name } = priceCardList.value[currentPriceIndex.value];
        let diff = 0;
        switch (name) {
          case '季度会员':
            diff = 3;
            break;
          case '半年会员':
            diff = 6;
            break;
          case '年度会员':
            diff = 12;
            break;
        }
        let beginTime = dayjs(Date.now()).valueOf();
        let endTime = dayjs(Date.now()).add(diff, 'month').valueOf();
        if (userInfo.value.memberExpireDate) {
          beginTime = dayjs(userInfo.value.memberExpireDate).valueOf();
          endTime = dayjs(userInfo.value.memberExpireDate).add(diff, 'month').valueOf();
        }

        createOrder({
          userId: userInfo.value.id,
          goodsPrice,
          beginTime,
          endTime,
          orderStatus: 1,
          message: '开通会员',
        }).then(({ data }) => {
          payRequest(data, () => {
            userStore.getUserInfo();
          });
        });
      },
    });
  };

  onLoad(() => {
    getPriceCardList().then((res) => {
      priceCardList.value = (res.data || []) as Array<PriceCard>;
    });
  });
</script>

<style lang="scss" scoped>
  .vip-member {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    &__container {
      flex: 1 0 0;
      overflow-y: auto;
    }

    &__content {
      font-size: 28rpx;
      padding: 0 32rpx 32rpx;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 88rpx,
        rgba(255, 255, 255, 1) 88rpx,
        rgba(255, 255, 255, 1) 100%
      );

      &__price {
        display: flex;
        gap: 22rpx;
        margin-top: 50rpx;
        margin-bottom: 32rpx;
        & > view {
          background: #f3f5f7;
          border-radius: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1 0 0;
          padding: 50rpx 0 34rpx;
          color: #2e0f06;
          border: 2rpx solid #f3f5f7;
          .label {
            font-weight: 600;
          }
          .price {
            text {
              font-size: 64rpx;
              font-family: D-DIN, D-DIN;
              font-weight: bold;
              color: #2a1904;
            }
          }
          .underline-price {
            opacity: 0.3;
            text-decoration: line-through;
          }
          &:first-child {
            position: relative;
            &::before {
              content: '推荐';
              position: absolute;
              top: -20rpx;
              left: 0;
              background: linear-gradient(302deg, #f5cb8e 0%, #faddbc 100%);
              border-radius: 8rpx 8rpx 8rpx 0rpx;
              font-size: 24rpx;
              padding: 4rpx 12rpx;
              font-weight: 600;
            }
          }
        }

        .active {
          background: #fffaee;
          border: 2rpx solid #ecdbc5;
        }
      }

      &__intro {
        display: flex;
        gap: 16rpx;
        background: #fcf6ee;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        padding: 24rpx 32rpx;
        background-repeat: no-repeat;
        background-size: 172rpx 78rpx;
        background-position: 490rpx 24rpx;
        image {
          flex-shrink: 0;
          width: 48rpx;
          height: 48rpx;
        }
        .intro {
          flex: 1 0 0;
          font-size: 28rpx;
          color: #2b1501;
          &__title {
            font-weight: 600;
            // margin-bottom: 8rpx;
            line-height: 2;
          }
          &__desc {
            opacity: 0.5;
          }
        }
      }
    }

    &__footer {
      padding: 32rpx 32rpx 88rpx;
      font-size: 28rpx;
      color: #281701;
      text-align: center;
      background: #ffffff;
      .btn {
        background: #281701;
        border-radius: 20rpx;
        text-align: center;
        padding: 24rpx 0;
        color: #f5d09f;
        margin-bottom: 24rpx;
      }
    }
  }
</style>
